<template>
  <div style="background-color: #fff; padding-top: 8px">
    <el-form :model="form" ref="form" label-width="100px">
      <el-form-item label="系统名称:">
        <el-tag type="success" size="medium">{{ SystemName }}</el-tag>
      </el-form-item>

      <el-form-item label="角色名称:">
        <span>{{ RoleName }}</span></el-form-item
      >
    </el-form>

    <div style="padding: 0 18px 18px 18px">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        default-expand-all
        :header-cell-style="{
          background: '#F5F7FA',
          color: '#303133',
          'text-align': 'center',
        }"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="type" label="功能模块" width="auto">
          <template slot-scope="scope">
            {{ scope.row.type }}
          </template>
        </el-table-column>

        <el-table-column label="字段权限" width="auto">
          <el-table-column
            prop="name"
            label="允许查看字段"
            width="700px"
            className="my-cell"
          >
            <template slot-scope="scope">
              <el-row>
                <el-col :span="8">
                  <el-tag type="success" v-if="scope.row.lookField.statusMsg">{{
                    scope.row.lookField.statusMsg
                  }}</el-tag>
                </el-col>
                <el-col :span="8">
                  <div v-if="scope.row.tableName">
                    <el-tag type="warning">
                      {{ scope.row.tableName }}
                      {{ scope.row.tableDescription }}</el-tag
                    >
                  </div>
                </el-col>
                <el-col :span="8">
                  <span
                    style="position: absolute; top: -4px; right: 14px"
                    v-if="scope.row.IsSet"
                  >
                    <el-button
                      type="text"
                      @click="clickTemplate(scope.row, 'check')"
                      >设置权限</el-button
                    >
                  </span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-row>
                    <el-col :span="12">
                      <div
                        v-for="(item, index) in scope.row.lookField.ColumnInfo"
                        :key="index"
                      >
                        <div>
                          <span>{{ item.ColumnName }}</span>
                          <span>{{ item.ColumnDescription }}</span>
                        </div>
                        <!-- {{ item }} -->
                      </div>
                    </el-col>
                    <!-- <el-col :span="12">
                      <div
                        v-for="(item, index) in scope.row.lookField
                          .fieldDescriptions"
                        :key="index"
                      >
                        {{ item==""?"无描述":item }}
                      </div>
                    </el-col> -->
                  </el-row>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="允许编辑字段"
            width="700px"
            className="my-cell"
          >
            <template slot-scope="scope">
              <el-row>
                <el-col :span="8">
                  <el-tag type="success" v-if="scope.row.editField.statusMsg">{{
                    scope.row.editField.statusMsg
                  }}</el-tag>
                </el-col>
                <el-col :span="8">
                  <div v-if="scope.row.tableName">
                    <el-tag type="warning">
                      {{ scope.row.tableName }}
                      {{ scope.row.tableDescription }}</el-tag
                    >
                  </div>
                </el-col>
                <el-col :span="8">
                  <span
                    style="position: absolute; top: -4px; right: 14px"
                    v-if="scope.row.IsSet"
                  >
                    <el-button
                      type="text"
                      @click="clickTemplate(scope.row, 'edit')"
                      >设置权限</el-button
                    >
                  </span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-row>
                    <el-col :span="12">
                      <div
                        v-for="(item, index) in scope.row.editField.ColumnInfo"
                        :key="index"
                      >
                        <div>
                          <span>{{ item.label }}</span>
                          <!-- <span>{{ item.ColumnDescription }}</span> -->
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <!-- <div style="height: 56px">
      <div style="margin: 18px 18px 18px 0; float: right">
        <el-button plain>返 回</el-button>
        <el-button type="primary">确 定</el-button>
      </div>
    </div> -->
    <div>
      <el-drawer
        title="设置字段权限"
        :visible.sync="drawer"
        direction="rtl"
        size="35%"
        :before-close="handleClose"
      >
        <div style="width: 90%; margin: 0 auto; margin-bottom: 80px">
          <el-form ref="form" :model="form" label-width="120px" :rules="rules">
            <el-form-item label="请选择表：">
              <el-select
                v-model="form.tableName"
                placeholder="请选择表"
                clearable
              >
                <el-option
                  v-for="item in table"
                  :key="item.TableName"
                  :label="item.label"
                  :value="item.TableName"
                  @click.native="change(item)"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="请选择字段：" v-if="columnInfo.length != 0">
              <el-checkbox
                :indeterminate="isIndeterminate"
                v-model="checkAll"
                @change="handleCheckAllChange"
                >全选</el-checkbox
              >
              <div style="margin: 15px 0"></div>
              <el-checkbox-group
                v-model="checkedCities"
                @change="handleCheckedCitiesChange"
                style="
                  display: flex;
                  flex-flow: column nowrap;
                  align-items: flex-start;
                "
              >
                <el-checkbox
                  v-for="item in columnInfo"
                  :label="item.ColumnName"
                  :key="item.ColumnName"
                  >{{ item.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </div>
        <span
          style="
            position: absolute;
            width: 96%;
            bottom: 15px;
            z-index: 10000;
            background-color: #fff;
            height: 60px;
          "
        >
          <el-button style="width: 45%; margin-left: 32px" @click="cancel"
            >取 消</el-button
          >
          <el-button
            style="width: 45%"
            type="primary"
            @click="submit"
            :loading="loading"
            >{{ loading ? "提交中 ..." : "确 定" }}</el-button
          >
        </span>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import {
  GetPermissionsFieldTree_get,
  PermissionsFieldPost_post,
} from "@/api/business";
import treeCom from "./treeCom";
export default {
  name: "VueXuAdminOperate",
  components: {
    treeCom,
  },
  data() {
    return {
      SystemName: JSON.parse(localStorage.getItem("xmGlDetails")).SystemName,
      RoleName: JSON.parse(localStorage.getItem("xmGlSzQx")).RoleName,
      normalizer(node) {
        console.log(node, "node");
        if (node.children && !node.children.length) {
          delete node.children;
        }
      },
      loading: false,
      drawer: false,
      radio: 3,
      checkAll: false,
      checkedCities: [],
      isIndeterminate: false,
      tableData: [],
      table: [],
      columnInfo: [],
      form: {
        roleId: JSON.parse(localStorage.getItem("xmGlSzQx")).Id,
        modulesId: "",
        tableName: "",
        tableDescription: "",
        look: [],
        edit: [],
      },
      tableInfos: [],
      type: "",
      rules: {
        tableName: [{ required: true, message: "请选择表", trigger: "blur" }],
      },
    };
  },

  mounted() {
    this.getData();
  },

  methods: {
    async getData() {
      let data = {
        managementId: JSON.parse(localStorage.getItem("xmGlDetails")).Id,
        roleId: JSON.parse(localStorage.getItem("xmGlSzQx")).Id,
      };
      let res = await GetPermissionsFieldTree_get(data);

      this.tableData = res.data.response.fieldTreeTable;
      this.tableInfos = res.data.response.tableInfos;
    },
    clickTemplate(data, type) {
      this.form.modulesId = data.id;
      this.form.tableName = data.tableName;
      this.form.tableDescription = data.tableDescription;
      this.type = type;

      if (this.type == "edit") {
        this.table = data.editField.tableInfos;
        if (data.tableName) {
          this.table.forEach((item) => {
            if (item.TableName == data.tableName) {
              this.columnInfo = item.ColumnInfo;
            }
          });
        }
        if (data.editField.ColumnInfo) {
          this.form.edit = data.editField.ColumnInfo;
          this.checkAll = data.editField.checkAll;
          this.isIndeterminate = data.editField.isIndeterminate;

          data.editField.ColumnInfo.forEach((item) => {
            this.checkedCities.push(item.ColumnName);
          });
        }
      } else if (this.type == "check") {
        this.table = this.tableInfos;
        if (data.tableName) {
          this.table.forEach((item) => {
            if (item.TableName == data.tableName) {
              this.columnInfo = item.ColumnInfo;
            }
          });
        }
        if (data.lookField.ColumnInfo != null) {
          this.form.look = data.lookField.ColumnInfo;
          this.checkAll = data.lookField.checkAll;
          this.isIndeterminate = data.lookField.isIndeterminate;

          data.lookField.ColumnInfo.forEach((item) => {
            this.checkedCities.push(item.ColumnName);
          });
        }
      }

      this.drawer = true;
    },
    change(data, type) {
      this.checkedCities = [];
      this.isIndeterminate = false;
      this.checkAll = false;
      this.form.tableName = data.TableName;
      this.form.tableDescription = data.TableDescription;
      this.columnInfo = data.ColumnInfo;
    },
    submit() {
      this.loading = true;
      this.form.look = [];
      this.form.edit = [];
      this.columnInfo.forEach((item) => {
        this.checkedCities.forEach((item2) => {
          if (this.type == "check") {
            if (item.ColumnName == item2) {
              this.form.look.push({
                fieldName: item2,
                fieldDescription: item.ColumnDescription,
              });
            }
          }
          if (this.type == "edit") {
            if (item.ColumnName == item2) {
              this.form.edit.push({
                fieldName: item2,
                fieldDescription: item.ColumnDescription,
              });
            }
          }
        });
      });

      // this.checkedCities.forEach((item) => {
      //   if (this.type == "check") {
      //     this.form.look.push({
      //       fieldName: item.ColumnName,
      //       fieldDescription: item.ColumnDescription,
      //     });
      //   } else if (this.type == "edit") {
      //     this.form.edit.push({
      //       fieldName: item.ColumnName,
      //       fieldDescription: item.ColumnDescription,
      //     });
      //   }
      // });
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let res = await PermissionsFieldPost_post(this.form);
          if (res.data.success) {
            this.drawer = false;
            this.loading = false;
            this.getData();
            this.rest();
            this.$message({
              type: "success",
              message: res.data.msg,
            });
          } else {
            this.loading = false;
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          }
        } else {
          return false;
        }
      });
    },
    handleCheckAllChange(val) {
      let data = [];
      this.columnInfo.forEach((item) => {
        data.push(item.ColumnName);
      });
      this.checkedCities = val ? data : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let data = [];
      this.columnInfo.forEach((item) => {
        data.push(item.ColumnName);
      });
      let checkedCount = value.length;
      this.checkAll = checkedCount === data.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < data.length;
    },
    handleClose(done) {
      this.rest();
    },
    cancel() {
      this.rest();
    },
    rest() {
      this.checkedCities = [];
      this.form.tableName = "";
      this.columnInfo = [];
      this.checkAll = false;
      this.isIndeterminate = false;
      this.drawer = false;
    },
  },
};
</script>

<style  scoped>
/deep/ .el-select {
  width: 100% !important;
}
</style>

<style>
.el-table .my-cell {
  vertical-align: top !important;
}
</style>
